<template>
<div v-loading="loading">
  <el-row :gutter="8">
    <el-col :xs="24" :span="10">
      <el-card class="box-card">
        <div slot="header">
          <span>基本信息</span>
        </div>
        <div>
<!--         <div style="text-align: center">
           <el-avatar icon="el-icon-user-solid" :size="90"></el-avatar>
         </div>-->
          <div style="display: flex;justify-content: space-between">
            <div>
              <el-tag v-if="userData.groupAdmin" type="success">组织管理员</el-tag>
              <el-tag v-if="userData.branchAdmin" type="warning">部门管理员</el-tag>
            </div>
            <el-link v-if="editAbled" icon="el-icon-check" type="primary" @click="updateUser">更新信息</el-link>
          </div>
          <div v-for="item in baiscProps" :key="item.prop" class="info-item">
            <div><i :class="item.icon"></i>{{ item.label }}</div>
            <div>
              <el-input v-if="item.editAbled && editAbled" v-model="userData[item.prop]"></el-input>
              <span v-else>{{ userData[item.prop] }}</span>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :xs="24" :span="14">
      <el-card class="box-card">
        <div slot="header">
          <span>附加信息</span>
        </div>
        <el-tabs v-model="activeName">
          <el-tab-pane v-if="!userId" label="组织信息" name="group">
            <el-table :data="userData.groups">
              <el-table-column prop="groupName" label="名称" align="center"/>
              <el-table-column prop="groupIntroduce" label="介绍" align="center" />
              <el-table-column align="center">
                <template slot-scope="scope">
                  <el-tag v-if="userData.groupId === scope.row.branchId">当前组织</el-tag>
                  <el-button v-else type="success" icon="el-icon-thumb" circle @click="switchGroup(scope.row)" title="选择"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
<!--          <el-tab-pane label="岗位信息" name="job">
            <el-table :data="userData.jobs">
              <el-table-column prop="jobName" label="名称" align="center"/>
              <el-table-column prop="jobCode" label="编码" align="center" />
              <el-table-column prop="jobLevel" label="级别" align="center" />
              <el-table-column prop="jobAbility" label="职责" align="center" />
            </el-table>
          </el-tab-pane>-->
          <el-tab-pane label="角色信息" name="role">
            <el-table :data="userData.roles">
              <el-table-column prop="roleName" label="名称" align="center"/>
              <el-table-column prop="roleCode" label="编码" align="center" />
              <el-table-column prop="roleevel" label="级别" align="center" />
              <el-table-column prop="roleAbility" label="能力" align="center" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="password">
            <div style="color: red"> 新建用户密码未空,可不填原密码</div>
            <div style="color: red"> 密码长度最少需要8位,且要包含字母、数字、特殊符号</div>
            <el-form label-position="left" label-width="80px">
              <el-form-item label="原密码" required>
                <el-input show-password v-model="modifyData.oldPass" placeholder="输入原密码" />
              </el-form-item>
              <el-form-item label="新密码" required>
                <el-input show-password v-model="modifyData.newPass" placeholder="输入新密码" />
              </el-form-item>
              <el-form-item label="确认密码" required>
                <el-input v-model="modifyData.surePass" placeholder="输入新密码" show-password />
              </el-form-item>
              <el-form-item style="text-align: center">
                <el-button type="danger" @click="modifyPass" :loading="loading">修改</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</div>
</template>

<script>

import {resetRouter} from "@/router";

export default {
  name: "UserInfo",
  props: {
    userId: {
      type: String,
      default: function (){
        return ''
      }
    },
    editAbled: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      loading: false,
      baiscProps: [
        {label:'用户名称',icon:'',prop:'nickName', editAbled: true }, {label:'手机号码',icon:'',prop:'mobilePhone', editAbled: true }, {label:'电子邮箱',icon:'',prop:'email', editAbled: true },
        {label:'身份证号',icon:'',prop:'identityCard', editAbled: true }, {label:'用户性别',icon:'',prop:'gender'}, {label:'出生日期',icon:'',prop:'birthDay'},
        {label:'当前部门',icon:'',prop:'branchAllName'}, {label:'当前组织',icon:'',prop:'groupName'},
        {label:'用户编码',icon:'',prop:'userCode'}, {label:'登陆日期',icon:'',prop:'loginAt'}
      ],
      activeName: this.userId ? 'role' : 'group',
      userData: {nickName: ''},
      modifyData: {},
      infoId: ''
    }
  },
  computed: {
    loginUser(){
      return this.$AuthStorage.getUserInfo()
    }
  },
  created() {
    this.loadUserInfo()
  },
  methods: {
    loadUserInfo(){
      this.infoId = this.userId
      if (this.$Util.isEmpty(this.infoId) && this.loginUser){
        this.infoId = this.loginUser.userId
      }
      if (this.$Util.isEmpty(this.infoId)){
        return
      }
      this.loading = true
      this.$get('/user/userInfo/' + this.infoId)
      .then(res => {
        this.$resultMsg(this, res, true)
        if (res.code === 200 && res.data) {
          this.userData = res.data
        }
        setTimeout(() => {
          this.loading = false
        },100)
      })
    },
    switchGroup(group){
      this.$get('/userGroup/switchGroup/' + group.branchId)
      .then(res => {
        if (res.code === 200) {
          this.$confirm('组织切换成功，请重新登陆', '提示', {
            confirmButtonText: '确定',
            type: 'warning',
            showClose: false,
            showCancelButton: false,
          }).then(() => {
            this.goLogin()
          }).catch(() => {
            this.goLogin()
          })
        } else {
          this.$resultMsg(this, res)
        }
      })
    },
    goLogin(){
      this.$AuthStorage.clear();
      resetRouter(); // 重置路由
      this.$router.push('/login');
    },
    modifyPass() {
      this.loading = true
      this.modifyData.userId = this.infoId
      this.$post('/user/modifyPass', this.modifyData)
      .then(res => {
        this.$resultMsg(this, res)
        setTimeout(() => {
          this.loading = false
        },100)
      })
    },
    updateUser() {
      this.loading = true
      this.$post('/user/save', this.userData)
          .then(res => {
            this.$resultMsg(this, res)
            setTimeout(() => {
              this.loading = false
            },100)
          })
    }
  }
}
</script>

<style scoped lang="scss">
.info-item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  border-bottom: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  margin-bottom: -1px;
  padding: 11px 0;
  font-size: 13px;
  i {
    margin-right: 10px;
  }
}
.box-card {
  height: 650px;
}
</style>
